<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title> 
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
	<h2>文本</h2>
	<p class="text-muted">该段落使用了样式 "text-muted"。</p>            
    <a class="text-muted" href="http://www.w3cschool.cc">链接使用了样式 "text-muted"。</a>      
    <p class="text-primary">该段落使用了样式 "text-primary"。</p>            
    <a class="text-primary" href="http://www.w3cschool.cc">链接使用了样式 "text-primary"。</a>        
    <p class="text-success">该段落使用了样式 "text-success"。</p>            
    <a class="text-success" href="http://www.w3cschool.cc">链接使用了样式 "text-success"。</a>  
    <p class="text-info">该段落使用了样式 "text-info"。</p>            
    <a class="text-info" href="http://www.w3cschool.cc">链接使用了样式 "text-info"。</a>    
    <p class="text-warning">该段落使用了样式 "text-warning"。</p>            
    <a class="text-warning" href="http://www.w3cschool.cc">链接使用了样式 "text-warning"。</a>          
    <p class="text-danger">该段落使用了样式 "text-danger"。</p>            
    <a class="text-danger" href="http://www.w3cschool.cc">链接使用了样式 "text-danger"。</a> 
    <h2>背景</h2>
	<p class="bg-primary">该段落使用了类 "bg-primary"。</p>
    <a class="bg-primary" href="/index.php">该链接使用了类 "bg-primary"。</a>
    <p class="bg-success">该段落使用了类 "bg-success"。</p>
    <a class="bg-success" href="/index.php">该链接使用了类 "bg-success"。</a>
    <p class="bg-info">该段落使用了类 "bg-info"。</p>
    <a class="bg-info" href="/index.php">该链接使用了类 "bg-info"。</a>      
    <p class="bg-warning">该段落使用了类 "bg-warning"。</p>
    <a class="bg-warning" href="/index.php">该链接使用了类 "bg-warning"。</a>        
    <p class="bg-danger">该段落使用了类 "bg-danger"。</p>
    <a class="bg-danger" href="http://www.baidu.com">百度</a>     
    <h2>实例</h2>
	<div class="pull-left">元素浮动到左侧</div>
    <div class="pull-right">元素浮动到右侧</div>     
    <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
    <p> .show 类强制一个元素显示:</p>
	<p class="show">该段落强制显示</p>
	<p> .hidden 类强制一个元素隐藏 :</p>
	<p class="hidden">该段落强制隐藏</p>      
</div>

</body>
</html>